<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calmness Presentation - Slide 8</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1"></script>
    <style>
        body {
            height: 1080px;
            width: 1920px;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <style>
  @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600&display=swap');
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #f5f5f5;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    position: relative;
  }
  
  .slide-container {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 0;
    position: relative;
  }
  
  .left-section {
    flex: 0 0 33%;
    background: #f5f5f5;
    padding: 120px 80px 80px 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .content-area {
    flex: 1;
  }
  
  .main-heading {
    font-size: 80px;
    font-weight: 500;
    color: #000000;
    line-height: 1.15;
    letter-spacing: -1.5px;
    margin-bottom: 50px;
  }
  
  .body-text {
    font-size: 17px;
    font-weight: 300;
    color: #666666;
    line-height: 1.8;
    letter-spacing: 0.3px;
  }
  
  .bottom-label {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 60px;
  }
  
  .label-line {
    width: 80px;
    height: 2px;
    background: #000000;
  }
  
  .label-text {
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    letter-spacing: 0.5px;
  }
  
  .middle-section {
    flex: 0 0 28%;
    background: #e8e8e8;
    padding: 120px 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .text-block {
    font-size: 16px;
    font-weight: 300;
    color: #666666;
    line-height: 1.8;
    letter-spacing: 0.3px;
  }
  
  .right-section {
    flex: 0 0 39%;
    height: 100%;
    background: 
      radial-gradient(circle, #a8b8d8 1px, transparent 1px),
      linear-gradient(135deg, #a8b8d8 0%, #8fa5c7 100%);
    background-size: 4px 4px, 100% 100%;
    background-position: 0 0, 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .placeholder-text {
    font-size: 24px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
</style>

<div class="slide-container">
  <div class="left-section">
    <div class="content-area">
      <h1 class="main-heading">Vision</h1>
      
      <p class="body-text">
        Duis tincidunt mollis nisl non congue lorem congue non In placerat velit quis ismod semper ivamus tempor commodo odio nec velit quis ismod semper ivamus odio tincidunt mollis nisl non congue l
      </p>
    </div>
    
    <div class="bottom-label">
      <div class="label-line"></div>
      <div class="label-text">Text Title</div>
    </div>
  </div>
  
  <div class="middle-section">
    <p class="text-block">
      Duis tincidunt mollis nisl non congue lorem congue non In placerat velit quis ismod semper ivamus tempor commodo odio nec velit
    </p>
    
    <p class="text-block">
      Duis tincidunt mollis nisl non congue lorem congue non In placerat velit quis ismod semper ivamus tempor commodo odio nec velit
    </p>
    
    <p class="text-block">
      Duis tincidunt mollis nisl non congue lorem congue non In placerat velit quis ismod semper ivamus tempor commodo odio nec velit
    </p>
  </div>
  
  <div class="right-section">
    <div class="placeholder-text">placeholder image</div>
  </div>
</div>
</body>
</html>